<template>
    <div class="head-wrap" v-if="!isBar">
        <div class="head-content">
            <div class="logo_wrap">
                <router-link to="/" class="logo"></router-link>
                <div class="name"></div>
            </div>
            <div class="right">
                <div class="Wallet-box">
                    <div @click="sendAccount" v-if="!userAddr" class="linkAddress">
                        {{ $t("layout.linkWallet") }}
                    </div>
                    <div class="linkAddress" v-else>
                        {{ userAddr }}
                    </div>
                </div>
                <div class="imgfont language" @click="$refs.language.setat.open = true">
                    <svg viewBox="0 0 24 24" color="textSubtle" width="24px" xmlns="http://www.w3.org/2000/svg"
                        class="sc-231a1e38-0 etperP">
                        <path
                            d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM18.92 8H15.97C15.65 6.75 15.19 5.55 14.59 4.44C16.43 5.07 17.96 6.35 18.92 8ZM12 4.04C12.83 5.24 13.48 6.57 13.91 8H10.09C10.52 6.57 11.17 5.24 12 4.04ZM4.26 14C4.1 13.36 4 12.69 4 12C4 11.31 4.1 10.64 4.26 10H7.64C7.56 10.66 7.5 11.32 7.5 12C7.5 12.68 7.56 13.34 7.64 14H4.26ZM5.08 16H8.03C8.35 17.25 8.81 18.45 9.41 19.56C7.57 18.93 6.04 17.66 5.08 16ZM8.03 8H5.08C6.04 6.34 7.57 5.07 9.41 4.44C8.81 5.55 8.35 6.75 8.03 8ZM12 19.96C11.17 18.76 10.52 17.43 10.09 16H13.91C13.48 17.43 12.83 18.76 12 19.96ZM14.34 14H9.66C9.57 13.34 9.5 12.68 9.5 12C9.5 11.32 9.57 10.65 9.66 10H14.34C14.43 10.65 14.5 11.32 14.5 12C14.5 12.68 14.43 13.34 14.34 14ZM14.59 19.56C15.19 18.45 15.65 17.25 15.97 16H18.92C17.96 17.65 16.43 18.93 14.59 19.56ZM16.36 14C16.44 13.34 16.5 12.68 16.5 12C16.5 11.32 16.44 10.66 16.36 10H19.74C19.9 10.64 20 11.31 20 12C20 12.69 19.9 13.36 19.74 14H16.36Z">
                        </path>
                    </svg>
                </div>
                <div class="menu" @click="$refs.menuRefs.setat.open = true"><img src="@/assets/image/menu.png"></div>
            </div>
        </div>
    </div>
    <van-nav-bar :title="$t(title)" :left-text="$t('layout.return')" left-arrow @click-left="onClickLeft" v-else />
    <app-language ref="language" />
    <referrer />
    <app-menu ref="menuRefs" />
</template>
<script lang="ts">
import { defineComponent, onMounted, computed, nextTick } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import { UserModule } from "@/store/modules/user";
import { AppModule } from "@/store/modules/app";
import { i18n, vantLocales } from "@/i18n/index";
import "@/utils/pollWeb3";

export default defineComponent({
    setup() {
        const { t } = useI18n();
        const router = useRouter();
        const sendAccount = async () => {
            if (typeof window.ethereum !== "undefined") {
                try {
                    await UserModule.setRegisterWeb3();
                    let accounts = await UserModule.getRequestAccounts();
                    if (!accounts) {
                        showToast(t("layout.binanceChainNetwork"));
                    }
                    const isChain = await UserModule.addEthereumChain();
                    if (isChain != "ok") {
                        UserModule.SET_USERADDR("");
                        await nextTick(() => {
                            UserModule.SET_USERADDR(accounts as string);
                        });
                    }
                    const res = await UserModule.verifyToken();
                    if (res.data.data) {
                        UserModule.SET_USERADDR("");
                        await nextTick(() => {
                            UserModule.SET_USERADDR(accounts as string);
                        });
                    }

                } catch (error: any) {
                    // showToast(error);
                }
            } else {
                showToast(t("layout.dappBrowser"));
            }
        };
        const toggleLanguage = async () => {
            if (AppModule.language === "zh") {
                i18n.global.locale = "en";
            } else {
                i18n.global.locale = "zh";
            }
            vantLocales(i18n.global.locale);
            AppModule.toggleLanguage(i18n.global.locale);
        };
        const userAddr = computed(() => {
            if (UserModule.userAddr) {
                var subStr1 = UserModule.userAddr.substr(0, 5);
                var subStr2 = UserModule.userAddr.substr(
                    UserModule.userAddr.length - 5,
                    5
                );
                var subStr = subStr1 + "..." + subStr2;
                return subStr;
            } else {
                return "";
            }
        });
        const onClickLeft = () => history.back();
        const title = computed(() => router.currentRoute.value.meta.title)
        const isBar = computed(() => router.currentRoute.value.meta.isBar)
        onMounted(() => {
            setTimeout(() => {
                nextTick(async () => {
                    await sendAccount();
                });
            }, 500);
        });
        return {
            sendAccount,
            toggleLanguage,
            onClickLeft,
            userAddr,
            AppModule,
            title,
            isBar
        };
    },
});
</script>
<style lang="less" scoped>
.head-wrap {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    transition: 0.3s;
    z-index: 9;

    .head-content {
        position: relative;
        display: flex;
        justify-content: space-between;
        padding: 11px 15px;

        .logo_wrap {
            display: flex;
            align-items: center;

            .logo {
                display: inline-block;
                width: 15px;
                height: 15px;
                background: url("@/assets/logo.png") center no-repeat;
                background-size: cover;
                border-radius: 50%;
            }

            .name {
                margin-left: 5px;
                padding-bottom: 3px;
                width: 130px;
                color: #feddc3;
                height: 12px;
                font-size: 20px;
                font-style: oblique;
                font-weight: bold;
                background: url("@/assets/image/logoname.png") center/contain no-repeat;
            }
        }

        .right {
            display: flex;
            align-items: center;

            .Wallet-box {
                display: flex;
                align-items: center;

                img {
                    height: 20px;
                }
            }

            .lang_box {
                margin-right: 15px;
                height: 20px;
            }

            .linkAddress {
                display: flex;
                align-items: center;
                height: 28px;
                font-size: 15px;
                color: rgba(31, 33, 32, 1);
                font-weight: 500;

                .van-icon {
                    position: relative;
                    font-size: 18px;
                    margin-top: -2px;
                    padding-right: 1px;
                    font-weight: 500;
                }
            }

            .imgfont {
                margin-left: 8px;

                &.language {
                    display: flex;
                    align-items: center;
                }

                svg {
                    color: rgba(31, 33, 32, 1);
                    fill: rgba(31, 33, 32, 1);
                }
            }

            .bing {
                margin: 0 10px;
            }
        }

        .menu {
            margin-left: 10px;

            img {
                width: 20px;
            }
        }
    }
}

.van-nav-bar {
    margin-bottom: 15px;

    &:deep(.van-nav-bar__text) {
        color: rgba(31, 33, 32, 1)
    }

    &:deep(.van-icon) {
        color: rgba(31, 33, 32, 1)
    }

}
</style>
